<template>
<!-- 已登录 -->
<div v-if="isLogin">
 <div class="member">
  <div class="header-con">
   <div class="user-info">
    <div class="avatar-con">
     <div class="avatar">
      <img
       src="../assets/images/avatar_default.png"
       class="image-info"
      />
     </div>
    </div>
    <div class="person-con">
     <span>{{ username }}</span>
    </div>
   </div>
  </div>
 </div>
 <ul class="mui-table-view mui-table-view-chevron">
  <li class="mui-table-view-cell mui-media">
   <router-link :to="{ name: 'order_list' }" class="mui-navigate-right">
    <img
     class="mui-media-object mui-pull-left"
     src="../assets/images/avatar_default.png"
    />
    <div class="mui-media-body">我的订单</div>
   </router-link>
  </li>
  <li class="mui-table-view-cell mui-media">
   <router-link :to="{ name: 'address' }" class="mui-navigate-right">
    <img
     class="mui-media-object mui-pull-left"
     src="../assets/images/avatar_default.png"
    />
    <div class="mui-media-body">收货地址</div>
   </router-link>
  </li>
  <li class="mui-table-view-cell mui-media">
   <div @click="logout" class="mui-navigate-right">
    <img
     class="mui-media-object mui-pull-left"
     src="../assets/images/avatar_default.png"
    />
    <div class="mui-media-body">退出登录</div>
   </div>
</li>
 </ul>
</div>
<!-- 未登录 -->
<div v-else>
 <div class="member">
  <div class="member">
   <div class="header-con">
    <router-link :to="{ name: 'login' }" class="mui-navigate-right">
     <div class="user-info">
      <div class="avatar-con">
       <div class="avatar">
        <img
         src="../assets/images/avatar_default.png"
         class="image-info"
        />
       </div>
      </div>
      <div class="person-con">
       <span>登录 / 注册</span>
      </div>
     </div>
    </router-link>
   </div>
  </div>
 </div>
</div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
export default {
computed: {
 ...mapState({
  username: (state) => state.user.username,
 }),
 ...mapGetters("user", { isLogin: "isLogin" }),
},
methods: {
 logout() {
  this.$http.get("logout");
  this.$store.commit("user/logout");
  this.$auth.setAuthorization("");
  this.$toast("退出成功");
 },
},
};
</script>
<style scoped>
.mui-table-view .mui-media,
.mui-table-view .mui-media-body {
line-height: 42px;
}
.mui-table-view-cell:after {
left: 0px;
}
.member {
margin-bottom: 15px;
}
.header-con {
padding: 10px;
background-color: #fff;
}
.user-info {
position: relative;
overflow: hidden;
width: 100%;
height: 120px;
background: linear-gradient(90deg, #28a2ff, #ffd787);
box-shadow: 0 0.1rem 0.25rem #f8e3c6;
}
.avatar-con {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
}
.person-con {
position: absolute;
left: 90px;
top: 50%;
transform: translateY(-50%);
color: #fff;
}
.avatar {
width: 60px;
height: 60px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 15);
border: 1px solid hsla(0, 0%, 100%, 0.4);
border-radius: 50% 50%;
}
.image-info {
width: 100%;
height: 100%;
}
</style>